<html>

<head>
<script type="text/JavaScript" src="js/prototype.js"></script>


<script type="text/JavaScript">

var ids = Array();


function addTableRow(characteristic){
        //var i = document.createElement("input"); //input element, text
        //i.setAttribute('type',"text");
        //i.setAttribute('name',"username");

        // Add id to characteristics id
        ids.push(characteristic.id);

        var table = document.getElementById('tblCharacteristics');
        row = document.createElement('tr');


        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.denomination))
        row.appendChild(cell);

        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.categorie))
        row.appendChild(cell);



        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.dimension))
        row.appendChild(cell);

        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.weight))
        row.appendChild(cell);

        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.type))
        row.appendChild(cell);

        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.nature))
        row.appendChild(cell);


        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(characteristic.threshold))
        row.appendChild(cell);


        


        // Create the input element

        cell=document.createElement('td');
        tmpInput = undefined;

        if (characteristic.nature == "Booleana"){
            tmpInput = document.createElement('select');

            var choice = document.createElement('option');
            choice.value = 'no';
            choice.appendChild(document.createTextNode('No'));
            tmpInput.appendChild(choice);

            var choice = document.createElement('option');
            choice.value = 'si';
            choice.appendChild(document.createTextNode('Si'));
            tmpInput.appendChild(choice);

        }
        else if (characteristic.nature == "Difusa"){
            tmpInput = document.createElement('select');

            var choice = document.createElement('option');
            choice.value = 'nada';
            choice.appendChild(document.createTextNode('Nada'));
            tmpInput.appendChild(choice);

            var choice = document.createElement('option');
            choice.value = 'poco';
            choice.appendChild(document.createTextNode('Poco'));
            tmpInput.appendChild(choice);




            var choice = document.createElement('option');
            choice.value = 'regular';
            choice.appendChild(document.createTextNode('Regular'));
            tmpInput.appendChild(choice);

            var choice = document.createElement('option');
            choice.value = 'mucho';
            choice.appendChild(document.createTextNode('Mucho'));
            tmpInput.appendChild(choice);

            var choice = document.createElement('option');
            choice.value = 'todo';
            choice.appendChild(document.createTextNode('Todo'));
            tmpInput.appendChild(choice);



        }
        else if (characteristic.nature == "Numerica"){
            tmpInput = document.createElement("input");
            tmpInput.setAttribute('onchange','validate(this)');
        }
        tmpInput.setAttribute('id','input-' + characteristic.id);
        cell.appendChild(tmpInput);
        row.appendChild(cell);

        table.appendChild(row);
}

function validate(obj)
{

	var n=obj.value; 
	if (n<0 || n >11)
	{
	   alert("Por favor, ingrese un numero entre 0-10");
	   obj.value="";
	   obj.focus();
        }
}


function createForm(json){
    length = json.characteristics.length;

    //alert(length);

    for (var i=1; i<=length; i++){
        addTableRow(json.characteristics[i]);
    }
    

}

function init(){
    new Ajax.Request('json.php', {
      method: 'post',
      parameters: {action: 'getCharacteristics'},
      onSuccess: function(response) {
            var json = response.responseText.evalJSON();
            createForm(json);
      }
    });

}


function showResults(json){

    if (json.viability.error == "true"){
        alert("An error has ocurred: " + json.viability.error_desc);
        return;
    }

    var plausibility = document.getElementById('plausibility_value');
    plausibility.innerHTML = json.viability.plausibility

    var fitness = document.getElementById('fitness_value');
    fitness.innerHTML = json.viability.fitness

    var justification = document.getElementById('justification_value');
    justification.innerHTML = json.viability.justification

    var success = document.getElementById('success_value');
    success.innerHTML = json.viability.success

    var final_result = document.getElementById('final_result_value');
    final_result.innerHTML = json.viability.final_result

    var final_result_avg = document.getElementById('final_result_avg_value');
    final_result_avg.innerHTML = json.viability.final_result_avg

}

function calculate(){

    var values = {};
    
    var length = ids.length;
    for (var i = 0; i < length; i++) {
        id = ids[i];
        values[id] = document.getElementById('input-' + id).value;
    }

    json = Object.toJSON(values);

    new Ajax.Request('json.php', {
      method: 'post',
      parameters: {action: 'getViability', values: json},
      onSuccess: function(response) {
            var json = response.responseText.evalJSON();
            showResults(json); 
      }
    });



}




</script>




</head>



<body onload="init()">

<div id="poll">
<H1>Test de viabilidad</H1>
<table border="1" id="tblCharacteristics">
    <tr>
        <th>Caracter&iacute;stica</th>
        <th>Categor&iacute;a</th>
        <th>Dimensi&oacute;n</th>
        <th>Peso</th>
        <th>Tipo</th>
        <th>Naturaleza</th>
        <th>Umbral</th>
        <th>Valor</th>
    </tr>

</table>
</div>

<div id="results">

Plausibilidad: <div id="plausibility_value"></div>
<br/>
Adecuacion: <div id="fitness_value"></div>
<br/>
Justificacion: <div id="justification_value"></div>
<br/>
Exito : <div id="success_value"></div>
<br/>
Resultado Final: <div id="final_result_value"></div>
<br/>
Resultado Final Numerico: <div id="final_result_avg_value"></div>


</div>

<input type="submit" value="calcular" onclick="calculate()"></input>

</body>





</html>
